//少女粉 ffa5b5
/////////////////////////////////////////////////////////补充代码
// 菜单导航色值
$mybgcMenu_p: #f07c82; //#0066cc
$mybgcMenuTwo: #fff;
// 导航字体颜色
$mybgcFont_p: #fff;
$mybgcFontTwo_p: #000;
$mybgcTable_p: #222;
// 导航hover 颜色
// 二级菜单的hover
$mycMenuHover_p: #d0686dfa;
// 二级菜单颜色
$mybgcMenuHobver_p: #ff6069f5;
// 三级导航的Hover 颜色
$mybgcmenuhobverTree_p: #ce494ffa;
// 三级菜单颜色
$mybgcMenuTree_p: #e24d55f2; //#1877d6;
// 菜单导航 选中字体颜色
$MenuIsactive_p: #fbf304; // #00ffff;
// 背景颜色 bar 未激活
$mybgc_na_p: #f76d7d;

////////////////////////////////////////////////// 补充代码结束

// ////////////////////////////////////////////////////////////////////////////////////////////背景颜色 浅色   rgb(0, 102, 204);
$mybgc_p: #fff; //#f2f2f2;
// 底层背景色
$mybghs_p: #f2f2f2;
// 背景颜色 深色  mybgc
$mybgc_s_p: #d9d9d9;
////////////////////////////////    table color
// border颜色
$myborder_p: #ebeef5;
// table border颜色
$myTborder_p: #d9d9d9; //#ebeef5;
// table 表头背景颜色
$myTbThBg_p: #bbbbbb3d; //#dfd8d8;
// table hover背景颜色
$myTbTh_hover_p: #f5e2e6;
// table 选中行背景颜色
$myTbTh_current_row_p: #ffe1e7;
$myTable_striped_p: #ffeaee;

// 主要字体颜色
$textcolor_p: #ccc;
// 次要字体颜色
$textcolor_c_p: #999;
$textcolorBlue_p: #ffa5b5;
// card header cardTop_p
$cardTop_p: #ffd3db;
// card 字体
$cardFontcolor_p: #da5259;
////////////////////////////////////////////////////////////////////// 背景为白色的
$fff_p: #fff;
// 设置坐席首页border颜色
$zxBC_p: #aec7ff;

// 设置操作区域文字颜色与激活颜色
$submenu__title_p: #000;
// 设置下拉箭头
$i_p: #909399;

// 激活颜色
$active_c_p: #eb5e76;
// 翻页激活颜色
$active_F_p: #eb5e76;
// 设置hover颜色
$d8e6f7_p: #eb5e76;

// disabled buttom
$disabledColor_p: #fddae0;
// 卡片头
// $tags_c: #627ab3;
$tags_c_p: #ffa5b5;
// 卡片激活
$active_t_p: #f07c82;

// input 颜色设置
$input_b_p: #cecece;
$input_d_bg_p: #e2e2e2;
$input_d_c_p: #606266;

// 按钮颜色
$buttonColor_p: #f76d7d;
//  #da5259

//设置阴影
$box_shadow_p: #a5a5a5;
// /////////////////////////////////////////////////////////////////主题色护眼色开始///////////////////////////////////////////////////////////////////////////////////

#neightAction {
  .menuIndex_scrollbar {
    background-color: $mybgcMenu_p;
  }

  //   软电话 颜色
  .header-bar-left > .header-button {
    > .btnBox {
      > button {
        background: $buttonColor_p;
        border: 1px solid $buttonColor_p;
        color: $fff_p;
      }
      > button:disabled {
        background: $disabledColor_p;
        border: 1px solid $disabledColor_p;
        color: $fff_p;
      }
    }
  }
  .rights .el-button--text {
    color: $cardFontcolor_p;
  }

  //   日历模块
  .Schedule {
    // 日历模块 样式
    .el-calendar-table {
      .el-calendar-day .is-selected {
        color: $cardFontcolor_p;
      }
      .is-today {
        .el-calendar-day {
          .isdata .left {
            background-color: $active_t_p;
          }
        }
      }
    }
    .working .el-calendar-table {
      td {
        border-bottom: 1px solid $myTable_striped_p;
        border-right: 1px solid $myTable_striped_p;
      }
      tr:first-child td {
        border-top: 1px solid $myTable_striped_p;
      }
      tr td:first-child {
        border-left: 1px solid $myTable_striped_p;
      }
    }
    .el-calendar-table .is-selected .el-calendar-day {
      color: $cardTop_p;
      background-color: $cardTop_p;
    }
    .workTop .worktopLeft {
      border: 1px solid $active_t_p;
      .workLeftItem {
        background-color: $active_t_p;
      }
      .workItemBottom {
        color: $cardFontcolor_p;
      }
    }
  }
  // 弹出层 颜色
  .el-dialog__wrapper .el-dialog__header {
    background-color: $cardTop_p;
    > div {
      color: $active_F_p;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: $active_F_p;
    }
  }

  //   滑块颜色
  ::-webkit-scrollbar-thumb {
    background-color: $buttonColor_p;
  }
  // ////////////////////////////////////////////////////////////////////  提取 公共样式 带颜色的样式
  // 坐席首页的 小模块 基础样式
  .box-group-wrap .title {
    color: $cardFontcolor_p;
    background-color: $cardTop_p;
  }
  //  table 数据表格颜色
  .el-table .cell {
    color: $mybgcTable_p;
  }
  .el-table th .cell {
    color: $submenu__title_p;
  }
  .el-table--striped
    .el-table__body-wrapper
    .el-table__body
    tr.el-table__row--striped
    td {
    background-color: $myTable_striped_p;
  }
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: $active_F_p;
  }

  //   按钮颜色
  .el-button--primary,
  .el-switch.is-checked .el-switch__core {
    background-color: $buttonColor_p;
    border-color: $buttonColor_p;
  }
  .el-button:focus,
  .el-button:hover {
    color: $cardFontcolor_p;
    border-color: $cardFontcolor_p;
    background-color: $myTable_striped_p;
  }
  .menuIndex .btnright_r:focus,
  .menuIndex .btnright_r:hover {
    background-color: transparent;
    border: none;
  }
  .skillmanageMentMain,
  .teammanageMentMain,
  .rolemanageMentMain {
    .el-tabs__item {
      border: 1px solid $buttonColor_p;
      color: $buttonColor_p;
    }
    .el-tabs__nav.is-top > .is-active {
      background-color: $buttonColor_p;
      color: $fff_p;
    }
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $buttonColor_p;
    border-color: $buttonColor_p;
  }
  // tab 颜色
  .is-always-shadow .el-card__header {
    background-color: $cardTop_p;
  }
  //   tab 的背景色
  .businessSystem-right-top {
    .el-tabs__nav-wrap .el-tabs__nav-scroll {
      background-color: $cardTop_p;
    }
    .head-bar-bottom .content_right .butSmell,
    .el-tabs__item.is-active,
    .btmstyle {
      color: $active_F_p;
      border: 1px solid $active_F_p;
    }
  }
  .head-bar-bottom .content_right .butSmell {
    color: $active_F_p;
    border: 1px solid $active_F_p;
  }
  // 按钮颜色
  .SetPicker {
    .butisShoe {
      background-color: $buttonColor_p;
    }
  }
  // 字体颜色
  .el-switch__label.is-active {
    color: $textcolorBlue_p;
  }

  //  tab 上面的字体

  .text_a {
    color: $active_F_p;
    cursor: pointer;
  }
  .listBox ul li:hover {
    background-color: $myTbTh_hover_p;
  }
  .learninggarden .learContent .item .item_moen,
  .user_wrap .user_bom p {
    color: $active_F_p;
  }
  // 树 型结构 的颜色
  .elTree_wrap {
    // background-color: $disabledColor_p;
    background-color: $fff_p;
  }
  .ivrtree .bg-green {
    background-color: $buttonColor_p;
  }
  ///////////////////////////////////////////////////////////////////////公共样式结束
  // 展开  一级菜单背景色
  .radioSty,
  .menuUl {
    background: $mybgcMenu_p;
    > .is-opened > .el-menu,
    > li > .el-menu {
      background-color: $mybgcMenu_p;
      text-indent: 28px;
    }
  }
  //  展开  二级菜单背景色
  .el-scrollbar__view .el-menu > div.MenuItem > {
    li.el-submenu > .el-menu {
      background-color: $mycMenuHover_p;
      text-indent: 25px;
      .MenuItem > .is-active {
        background-color: $active_t_p;
        opacity: 1;
        color: $mybgcFont_p;
        > span {
          color: $MenuIsactive_p;
        }
      }
    }
    li.is-opened {
      background-color: $mybgcMenu_p;
    }
  }
  //   展开 三级菜单背景色
  .MenuItem
    > li.is-opened.el-submenu
    > ul.el-menu
    > .MenuItem
    > li.is-opened.el-submenu
    > .el-menu {
    background-color: $mybgcMenuTree_p;
    text-indent: 30px;
    .MenuItem > .is-active {
      background-color: $mybgcmenuhobverTree_p;
    }
  }
  .el-menu--popup-right-start
    > .MenuItem
    .el-submenu.is-active
    .el-submenu__title {
    background-color: $mybgcmenuhobverTree_p;
  }
  .side-bar-scrollbar-view .el-menu.el-menu--collapse {
    .is-opened {
      background-color: $mybgcMenu_p;
    }
    .side-bar-scrollbar-view .el-menu.el-menu--collapse {
      .el-submenu,
      .is-opened {
        background-color: $mybgcMenu_p;
      }
    }
  }
  //   .el-menu-item span {
  //     color: $mybgcFont_p;
  //   }
  .el-scrollbar__view .el-menu > div {
    li.el-menu-item > span,
    li.el-submenu > div > span {
      color: $mybgcFont_p;
    }
  }
  //   字体颜色
  //   .el-submenu .el-submenu__title span {
  //     color: $mybgcFontTwo_p;
  //   }
  .el-submenu .el-submenu__title {
    // color: $mybgcFontTwo_p;
  }
  //   .el-menu--vertical .el-menu > .el-menu-item > span {
  //     color: $mybgcFontTwo_p;
  //   }
  .el-menu--vertical .el-menu > .el-menu-item {
    color: $mybgcFontTwo_p;
  }
  //导航透明度
  .el-menu > div > li {
    opacity: 1;
  }
  .el-menu > div > li.is-opened {
    opacity: 1;
  }

  //导航Hover颜色
  .el-menu > div > li:hover,
  .el-submenu__title:hover {
    background-color: $mycMenuHover_p;
    opacity: 1;
    color: $mybgcFont_p;
  }
  //   focus 样式
  .el-menu-item:focus {
    background-color: transparent;
  }
  //   .menuIndex div.MenuItem > li.el-menu-item.is-active {
  //     color: #00ffff;
  //   }

  //   background-color: $mybgc_p;
  .el-menu--horizontal,
  .cardAuthorizationTransaction .el-card {
    border: none !important;
  }
  .el-menu--horizontal {
    overflow-y: unset !important;
    .el-menu--popup {
      box-shadow: 0 2px 12px 0 $box_shadow_p;
    }
  }

  .cardAuthorizationTransaction .el-card {
    border: none !important;
  }
  .CardlossOf {
    .el-form-item-span {
      background-color: $input_d_bg_p;
      border: 1px solid $input_b_p;
    }
    .el-form-item__content {
      line-height: normal;
    }
  }
  .el-dialog {
    .el-tabs--card > .el-tabs__header {
      border-bottom: 1px solid $myborder_p;
    }
    .el-tabs--card > .el-tabs__header {
      .el-tabs__item {
        border-left: 1px solid $myborder_p;
      }
      .el-tabs__nav {
        border: 1px solid $myborder_p;
        .el-tabs__item.is-left.is-active {
          background-color: $myTable_striped_p !important;
          border-bottom-color: $myTable_striped_p !important;
          color: $fff_p;
        }
      }
    }

    .el-tabs__nav {
      border-bottom: transparent;
    }
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__content {
      background-color: $fff_p;
      padding: 15px;
      padding-bottom: 0;
      border-right: 1px solid $myborder_p;
      border-bottom: 1px solid $myborder_p;
      border-left: 1px solid $myborder_p;
    }
    .el-dialog__body .is-active {
      border-bottom-color: transparent !important;
      background-color: $mybgc_s_p;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
      border-bottom-color: $fff_p !important;
      background-color: $fff_p !important;
      color: $active_t_p;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item {
      border-bottom: 1px solid transparent !important;
    }
  }
  //   app-main 是大组件的内嵌 的最外一层
  .app-main {
    // background-color:$mybgc_p;
    & > div:not(.businessSystem-container) {
      //   background-color: $mybgc_p;
    }
    .recentCallMain,
    .ivrtree {
      background-color: $mybgc_p;
    }
    .container {
      & > div:not(.businessSystem-container) {
        // background-color: $mybgc_p;
      }
    }
  }
  background-color: $mybgc_p;
  // 设置翻页颜色
  .el-pagination.is-background .el-pager li,
  .btn-next,
  .btn-prev {
    background-color: $mybgc_s_p;
  }
  .header-bar-container {
    background-color: $fff_p;
    .btnBox {
      background-color: $fff_p;
    }
  }
  .head-left {
    .el-button {
      background-color: transparent;
    }
  }
  ///////////////////////////////////////////////// 其他不能集体控制背景颜色的类
  .memorandum,
  .workerOrder,
  .repository,
  .training,
  .noticemanageMentMain,
  .box-group {
    background-color: $mybgc_p;
  }
  .rightContainer {
    // background-color: $fff_p;
  }
  .bg-purple-dark {
    background-color: $fff_p;
    // .el-tree {
    //   background-color: $fff_p;
    // }
  }
  //   .el-tree {
  //     background-color: $fff_p;
  //   }
  //控制坐席首页时间轴颜色
  .listBox ul li .blueCirle,
  .rightContainer .mainBox .topBox {
    border: 1px solid $zxBC_p;
  }
  .listLines,
  .listLine {
    background-color: $zxBC_p;
  }
  // body区域样式
  .app-main-container,
  .homePage {
    background-color: $mybgc_s_p !important;
    .box-group {
      background-color: $mybgc_p;
      border: 1px solid $myborder_p;
    }
    .businessSystem-left,
    .iconfont {
      background-color: $mybgc_p;
    }
  }
  //   nav head 菜单样式
  .container {
    // background-color: $mybghs_p;
  }
  .dictmanageMain,
  .appMainWarp {
    background-color: $mybgc_p;
  }
  .businessSystem-container,
  .tags-view-container {
    background-color: $mybgc_s_p;
  }
  .tags-view-item {
    background-color: $mybgc_na_p;
  }

  .el-card,
  .router-link-active,
  .demo-form-inline {
    background-color: $mybgc_p;
  }
  // 设置卡片样式card
  .el-card {
    // border: 1px solid $myborder_p;
    .el-card__header {
      border-bottom: 1px solid $myborder_p;
    }
  }
  .line {
    border-bottom: 1px solid $myborder_p;
  }

  .el-menu--popup-bottom-start {
    .el-menu,
    .el-menu-item,
    .el-submenu__title {
      background-color: $mybgc_p;
    }
  }
  // 公告位置样式
  .app-main-container .horseeBox {
    background-color: $mybgc_s_p;
  }
  // .el-dialog弹窗颜色
  .el-dialog {
    background-color: $mybgc_p;
  }

  // 设置table样式
  .heard-bg {
    & > .el-table__header-wrapper {
      & > table {
        border-color: $myTborder_p;
        & > thead {
          & > tr {
            th {
              border-right: 1px solid $myTbThBg_p;
              border-bottom: 1px solid $myTbThBg_p;
              background: $myTbThBg_p;
              color: $fff_p;
            }
            td {
              border-bottom: 1px solid $myTbThBg_p;
              background: $mybgc_p;
            }
          }
        }
      }
    }
  }
  .el-table {
    background: $mybgc_p;
  }
  .el-table--border td {
    border-right: 1px solid $myTborder_p;
  }
  .el-table:not(.setbottomborder) {
    tr:not(:last-child) {
      td {
        border-bottom: 1px solid $myTborder_p;
      }
    }
  }
  .setbottomborder {
    td {
      border-bottom: 1px solid $myTborder_p;
    }
  }
  .el-table--border,
  .el-table--group {
    border: 1px solid $myTborder_p;
  }

  .el-table--enable-row-hover
    .el-table__body-wrapper
    .el-table__body
    tr:hover
    > td {
    background-color: $myTbTh_hover_p;
  }
  .el-table__body tr.current-row > td {
    background-color: $myTbTh_current_row_p;
  }
  .el-table--striped .el-table__body-wrapper tr.el-table__row--striped td {
    background-color: $myTbTh_hover_p;
  }
  //   current-row
  .el-table--striped .el-table__body-wrapper .el-table__body tr.current-row td {
    background-color: $myTbTh_current_row_p;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    content: '';
    position: absolute;
    background-color: transparent;
    z-index: 1;
  }

  .el-input.is-disabled .el-input__inner,
  .el-textarea.is-disabled .el-textarea__inner {
    border: 1px solid $input_b_p;
    &:disabled {
      // color: red;
      background-color: $input_d_bg_p;
      color: $input_d_c_p;
    }
  }
  // card tab 颜色
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: $buttonColor_g;
  }

  // ////////////////////////////////////////////////////////////////////  提取 公共样式 带颜色的样式

  // 设置各种阴影
  //   .tags-view-container .tags-view-item-container .tags-view-item {
  //     box-shadow: 0 -2px 10px 0 $box_shadow_p;
  //   }
  // 设置激活和hover样式
  // 翻页当前页激活
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: $active_F_p;
  }
  // 设置操作区域文字颜色与激活颜色
  #activeMenuId,
  .el-menu--popup-bottom-start,
  .el-menu--popup-right-start {
    // 设置未激活文字颜色
    li {
      .el-submenu__title {
        // color: $submenu__title_p;
        // >span{
        //     color: $submenu__title_p;
        // }
        &:hover {
          background-color: $mybgcMenuHobver_p;
        }
        // 设置箭头颜色
        i {
          color: $i_p;
        }
      }
    }
    li.is-opened {
      .el-submenu__title {
        color: $mybgcFont_p;
        > span {
          color: $mybgcFont_p;
        }
      }
    }
    .el-menu-item {
      color: $submenu__title_p;
      // >span{
      //     color: $submenu__title ;
      // }
      //   &.is-active {
      //     color: $active_c_p !important;
      //   }
    }
    .is-active {
      // 设置激活文字颜色
      .el-submenu__title {
        color: $active_c_p !important;
      }
    }
  }
  // 卡片选项文字颜色
  .tags-view-item-container {
    // 未激活
    .tags-view-item {
      color: $fff_p !important;
    }
    .is-active {
      color: $active_t_p !important;
    }
  }

  // 主题外的颜色 警告 提示 框 样式
  .el-message-box.success {
    //   background: #d5fcc1;
    .el-message-box__header {
      .el-message-box__title {
        color: #67c23a;
      }
    }
    .el-message-box__btns {
      .el-button--primary {
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
      }
    }
  }
  .el-message-box.warning {
    //   background: #ffdbc6;
    .el-message-box__header {
      .el-message-box__title {
        color: #e6a23c;
      }
    }
    .el-message-box__btns {
      .el-button--primary {
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
      }
    }
  }
  .el-message-box.error {
    //   background: #ffdbc6;
    .el-message-box__header {
      .el-message-box__title {
        color: #f56c6c;
      }
    }
    .el-message-box__btns {
      .el-button--primary {
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
      }
    }
  }
}
